<template>
  <div class="setStatic">
    <group title="鞋的尺码，之间用 ‘ / ’ 分隔，例：31 / 32 / 33" label-align="left">
      <x-input title="尺码" placeholder="填写尺码" v-model="saveSize"></x-input>
    </group>
    <group title="鞋的颜色，之间用 ‘ / ’ 分隔，例：红 / 棕 / 蓝绿" label-align="left">
      <x-input title="颜色" placeholder="填写颜色" v-model="saveColor"></x-input>
    </group>
    <group title="鞋的标签，之间用 ‘ / ’ 分隔，例：英伦 / 新品 / 牛皮" label-align="left">
      <x-input title="标签" placeholder="填写标签" v-model="saveStyle"></x-input>
    </group>

    <flexbox>
      <flexbox-item><div class="flex-demo"><x-button @click.native="setDatas" type="primary">保存</x-button></div></flexbox-item>
      <flexbox-item><div class="flex-demo"><x-button type="warn" @click.native="showPlugin">放弃</x-button></div></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { XInput, Group, XButton, Flexbox, FlexboxItem, Confirm, TransferDom } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      Confirm
    },
    name: 'setStatic',
    data () {
      return {
        initData: {},
        saveSize: '',
        saveStyle: '',
        saveColor: '',
        hasData: true
      }
    },
    methods: {
      showPlugin () {
        let self = this
        this.$vux.confirm.show({
          title: '确定放弃保存?',
          content: '',
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            self.$router.push({path: '/'})
          }
        })
      },
      loadDatas () {
        this.initData = JSON.parse(localStorage.getItem('static'))
        if (!this.initData) {
          this.hasData = false
          this.initData = {
            'Size': [[]],
            'Color': [[]],
            'Style': [],
            'Gender': [['男', '女', '通吃']]
          }
        }
      },
//      数组去重
      unique (arr) {
        const seen = new Map()
        return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
      },
      setDatas () {
//      字符串转数组
        if (this.saveSize) { this.saveSize = this.saveSize.split('/') }
        if (this.saveStyle) { this.saveStyle = this.saveStyle.split('/') }
        if (this.saveColor) { this.saveColor = this.saveColor.split('/') }
//        判断是否有初始值
        if (this.hasData) {
//            有初始值，直接添加
          if (this.saveSize) { this.initData.Size[0] = this.initData.Size[0].concat(this.saveSize)  }
          if (this.saveStyle) { this.initData.Style = this.initData.Style.concat(this.saveStyle) }
          if (this.saveColor) { this.initData.Color[0] = this.initData.Color[0].concat(this.saveColor) }
        } else {
          this.initData.Size[0] = this.saveSize
          this.initData.Color[0] = this.saveColor
          this.initData.Style = this.saveStyle
        }
        this.initData.Size[0] = this.unique(this.initData.Size[0])
        this.initData.Color[0] = this.unique(this.initData.Color[0])
        this.initData.Style = this.unique(this.initData.Style)
        this.reSet()
      },
      reSet () {
        let sendData = this.initData
        sendData = JSON.stringify(sendData)
        localStorage.setItem('static', sendData)
        this.initData = JSON.parse(localStorage.getItem('static'))
        this.showOK()
        this.saveColor = ''
        this.saveSize = ''
        this.saveStyle = ''
      },
      showOK () {
        this.$vux.toast.show({
          text: '保存成功！'
        })
      }
    },
    mounted () {
      this.loadDatas()
    }
  }
</script>

<style scoped>
  .setStatic{
    text-align: left;
    margin-bottom: 50px;
  }
  .flex-demo{
    margin-top: 50px;
  }
</style>
